<template>
    <el-color-picker
        v-model="theme"
        :predefine="['#409EFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
        class="theme-picker"
        popper-class="theme-picker-dropdown"
    />
</template>

<script>


import themeMixin from '@/mixin/theme'

export default {
    mixins: [themeMixin],
    data() {
        return {
            chalk: '', // content of theme-chalk css
            theme: ''
        }
    },
    computed: {
        defaultTheme() {
            return this.$store.state.settings.theme
        }
    },
    watch: {
        defaultTheme: {
            handler: function(val, oldVal) {
                this.theme = val
            },
            immediate: true
        },
        async theme(val) {

            this.$store.dispatch('settings/changeSetting', {
                key: 'theme',
                value: val
            })
            this.updateTheme(val)
            
        }
    },

    methods: {
        


    }
}
</script>

<style>
.theme-message,
.theme-picker-dropdown {
  z-index: 99999 !important;
}

.theme-picker .el-color-picker__trigger {
  height: 26px !important;
  width: 26px !important;
  padding: 2px;
}

.theme-picker-dropdown .el-color-dropdown__link-btn {
  display: none;
}
</style>
